<template>
	<!-- 实时记账 -->
	<view class="container ">
		<view class="container-back" style="height:1780rpx;background-color: #FFFFFF;">
			<view class="tabbar flex" >
				<view class="tabbar-list text-center" :class="{'active':tabbarIndex==item.id}" v-for="(item,index) in tabbarListData" :key="index" @click="tabbarChange(item.id)">{{item.name}}</view>
			</view>
			<uni-transition :duration="1000" :mode-class="'slide-right'"  :show="isTop" >
				<view class="home-input flex column">
					<view class="flex Acenter " style="margin-bottom: 30rpx;margin-top: 50rpx;font-size: 60rpx;font-weight: bold;">
						￥<input style="margin-left: 15rpx;height: 80rpx;" type="digit" :value="value"  @input="inputChange" @focus="priceInputFocus" @blur="priceInputBlur"/>
						<uni-transition :duration="500" :mode-class="'slide-right'" :styles="transfromClass" :show="transShow" >
							<button style="width: 265rpx;font-size: 28rpx;font-weight: bold;" class="home-input-button" type="default" @click="inputSubmitButton">记一笔</button>
						</uni-transition>
					</view>
					<u-line color="#E0E0E0"></u-line>
				</view>
			</uni-transition>
			<view v-if="tabbarIndex==1" class="home-back" >
				<uni-transition :duration="1000" :mode-class="'slide-right'"  :show="isRight1" >
					<!-- 购物 参团只有购物-->
					<view  class="home-img">
						<view class="text28 fontWeight" style="font-size: 30rpx;"  >购物</view>
						<view class="flex margin-top20">
							<view class="flex " style="margin-top: 20rpx;" v-for="(item,index) in shoppingListData" :key="index">
								<view class="flex  Acenter column" style="width: 150rpx; " @click="clickImg(item,'购物')">
									<view class="home-item flex column block-back " style="margin-bottom: 20rpx;">
										<image  v-if="imgIndex==item.name"   style="width: 50rpx;height: 50rpx;" :src="item.onImg" mode=""></image>
										<image v-else style="width: 50rpx;height: 50rpx;" :src="item.offImg" mode=""></image>
									</view>
									<text class=" text24" style="color: #8A8A8A;">{{item.name}}</text>
								</view>
							</view>
						</view>
					</view>
				</uni-transition>
			</view>
			<view v-else class="home-back">
				<uni-transition :duration="1000" :mode-class="'slide-right'"  :show="isRight2" >
				<!-- 交通花费 -->
					<view  class="home-img">
						<view class="text28 fontWeight" style="font-size: 30rpx;">交通花费</view>
						<view class="flex margin-top20" style="flex-wrap: wrap;">
							<view class="flex " style="margin-top: 20rpx;padding-right: 40rpx;margin-bottom: 30rpx;" v-for="(item,index) in trafficListData" :key="index">
								<view class="flex  Acenter column"  @click="clickImg(item,'交通')">
									<view class="home-item flex column block-back " style="margin-bottom: 20rpx;">
										<image v-if="imgIndex==item.name"   style="width: 50rpx;height: 50rpx;" :src="item.onImg" mode=""></image>
										<image v-else style="width: 50rpx;height: 50rpx;" :src="item.offImg" mode=""></image>
									</view>
									<text class=" text24" style="color: #8A8A8A;">{{item.name}}</text>
								</view>
							</view>
						</view>
					</view>
					<!-- 住宿花费 -->
					<view  class="home-img">
						<view class="text28 fontWeight" style="font-size: 30rpx;">住宿花费</view>
						<view class="flex margin-top20" style="flex-wrap: wrap;">
							<view class="flex " style="margin-top: 20rpx;padding-right: 40rpx;margin-bottom: 30rpx;" v-for="(item,index) in homeListData" :key="index">
								<view class="flex  Acenter column"  @click="clickImg(item,'住宿')">
									<view class="home-item flex column block-back " style="margin-bottom: 20rpx;">
										<image  v-if="imgIndex==item.name"   style="width: 50rpx;height: 50rpx;" :src="item.onImg" mode=""></image>
										<image v-else style="width: 50rpx;height: 50rpx;" :src="item.offImg" mode=""></image>
									</view>
									<text class=" text24" style="color: #8A8A8A;">{{item.name}}</text>
								</view>
							</view>
						</view>
					</view>
					<!-- 购物 -->
					<view class="home-img">
						<view class="text28 fontWeight" style="font-size: 30rpx;">购物</view>
						<view class="flex margin-top20">
							<view class="flex " style="margin-top: 20rpx;padding-right: 40rpx;margin-bottom: 30rpx;" v-for="(item,index) in shoppingListData" :key="index">
								<view class="flex  Acenter column" @click="clickImg(item,'购物')">
									<view class="home-item flex column block-back " style="margin-bottom: 20rpx;">
										<image  v-if="imgIndex==item.name"   style="width: 50rpx;height: 50rpx;" :src="item.onImg" mode=""></image>
										<image v-else style="width: 50rpx;height: 50rpx;" :src="item.offImg" mode=""></image>
									</view>
									<text class=" text24" style="color: #8A8A8A;">{{item.name}}</text>
								</view>
							</view>
						</view>
					</view>
					<!-- 游览花费 -->
					<view  class="home-img">
						<view class="text28 fontWeight" style="font-size: 30rpx;">游览花费</view>
						<view class="flex margin-top20" style="flex-wrap: wrap;">
							<view class="flex " style="margin-top: 20rpx;padding-right: 40rpx;margin-bottom: 30rpx;" v-for="(item,index) in playListData" :key="index">
								<view class="flex  Acenter column"  @click="clickImg(item,'游览')">
									<view class="home-item flex column block-back " style="margin-bottom: 20rpx;">
										<image  v-if="imgIndex==item.name"  style="width: 50rpx;height: 50rpx;" :src="item.onImg" mode=""></image>
										<image v-else style="width: 50rpx;height: 50rpx;" :src="item.offImg" mode=""></image>
									</view>
									<text class=" text24" style="color: #8A8A8A;">{{item.name}}</text>
								</view>
							</view>
						</view>
					</view>
					<!-- 休闲娱乐花费 -->
					<view  class="home-img">
					<view class="text28 fontWeight" style="font-size: 30rpx;">休闲娱乐</view>
					<view class="flex margin-top20" style="flex-wrap: wrap;">
						<view class="flex " style="margin-top: 20rpx;padding-right: 40rpx;margin-bottom: 30rpx;" v-for="(item,index) in leisureListData" :key="index">
							<view class="flex  Acenter column"  @click="clickImg(item, '休闲')">
								<view v-if="index==1 || index==2" class="home-item flex column block-back " style="margin-bottom: 20rpx;">
									<image v-if="imgIndex==item.name"   style="width: 70rpx;height: 70rpx;" :src="item.onImg" mode=""></image>
									<image v-else style="width: 70rpx;height: 70rpx;" :src="item.offImg" mode=""></image>
								</view>
								<view v-else class="home-item flex column block-back " style="margin-bottom: 20rpx;">
									<image v-if="imgIndex==item.name"   style="width: 50rpx;height: 50rpx;" :src="item.onImg" mode=""></image>
									<image v-else style="width: 50rpx;height: 50rpx;" :src="item.offImg" mode=""></image>
								</view>
								<text class=" text24" style="color: #8A8A8A;">{{item.name}}</text>
							</view>
						</view> 
					</view>
				    </view>
			    </uni-transition>
			</view>
		</view>
	</view>
</template>

<script>
  export default {
    data() {
      return {
		    isRight1:true,
		    isRight2:false,
			isTop:true,
		    transShow:false,//是否开启动画
			show:false,
			title:'标题',
			content:'uView的目标是成为uni-app生态最优秀的UI框架',
			tabbarListData:[
				{
					id:1,
					name:'参团'
				},
				{
					id:2,
					name:'非参团'
				}
			],
			// 交通
			trafficListData:[
				{
					id:1,
					onImg: "../../../static/feiji.png",
					offImg:"../../../static/offfeiji.gif",
					name:'飞机'
			   },
				{
					id:2,
					onImg: "../../../static/huoche.png",
					offImg:"../../../static/offhuoche.gif",
					name:'火车'
				},
				{
					id:3,
					onImg: "../../../static/qiche.png",
					offImg:"../../../static/offqiche.gif",
					name:'汽车'
				},
				{
					id:4,
					onImg: "../../../static/chuzuche.png",
					offImg:"../../../static/offchuzuche.gif",
					name:'出租车'
				},
				{
					id:5,
					onImg: "../../../static/qichechuzu.png",
					offImg:"../../../static/offqichechuzu.png",
					name:'汽车出租'
				},
				{
					id:6,
					onImg: "../../../static/jiayoufei.png",
					offImg:"../../../static/offjiayoufei.gif",
					name:'加油费'
				},
				{
					id:7,
					onImg: "../../../static/tingchefei.png",
					offImg:"../../../static/offtingchefei.gif",
					name:'停车费'
				},
				{
					id:8,
					onImg: "../../../static/guolufei.png",
					offImg:"../../../static/offguolufei.gif",
					name:'过路费'
				},
				{
					id:9,
					onImg: "../../../static/qita.png",
					offImg:"../../../static/offqita.gif",
					name:'其他交通'
				},
			],
			// 住宿花费
			homeListData:[
				{
					id:10,
					onImg: "../../../static/jiudian.png",
					offImg:"../../../static/offjiudian.gif",
					name:'酒店'
				},
				{
					id:11,
					onImg:'../../../static/minsu.png',
					offImg:"../../../static/offminsu.gif ",
					name:'民宿'
				},
				{
					id:12,
					onImg:'../../../static/yingdi.png',
					offImg:"../../../static/offyingdi.gif",
					name:'营地'
				},
				{
					id:13,
					onImg:'../../../static/qita.png',
					offImg:"../../../static/offqita.gif",
					name:'其他住宿'
				}
			],
			// 购物
			shoppingListData:[
				{
					id:14,
					onImg: "../../../static/wenchuang.png",
					offImg:"../../../static/offwenchuang.gif",
					name:'文创产品'
				},
				{
					id:15,
					onImg:'../../../static/nonglin.png',
					offImg:"../../../static/offnonglin.gif ",
					name:'农林牧渔产品'
				},
				{
					id:16,
					onImg:'../../../static/techan.png',
					offImg:"../../../static/offtechan.gif",
					name:'特产'
				},
				{
					id:17,
					onImg:'../../../static/qita.png',
					offImg:"../../../static/offqita.gif",
					name:'其他购物'
				}
			],
			// 游览花费
			playListData:[
				{
					id:18,
					onImg: "../../../static/jingqumenpiao.png",
					offImg:"../../../static/offjingqumenpiao.gif",
					name:'景区门票'
				},
				{
					id:19,
					onImg:'../../../static/jingquyoule.png',
					offImg:"../../../static/offjingquyoule.gif ",
					name:'景区游乐'
				},
				{
					id:20,
					onImg:'../../../static/zhuti.png',
					offImg:"../../../static/offzhuti.gif",
					name:'主题乐园'
				},
				{
					id:21,
					onImg:'../../../static/changguan.png',
					offImg:"../../../static/offchangguanmenpiao.gif",
					name:'场馆门票'
				},
				{
					id:22,
					onImg:'../../../static/qita.png',
					offImg:"../../../static/offqita.gif",
					name:'其他游览'
				}
			],
			// 休闲娱乐花费
			leisureListData:[
				{
					id:23,
					onImg: "../../../static/dianying.png",
					offImg:"../../../static/offdianying.gif",
					name:'电影'
				},
				{
					id:25,
					onImg:'../../../static/yanchanghui.png',
					offImg:"../../../static/offyanchanghui.png ",
					name:'演唱会'
				},
				{
					id:26,
					onImg:'../../../static/yinyuehui.png',
					offImg:"../../../static/offyinyuehui.png",
					name:'音乐会'
				},
				{
					id:27,
					onImg:'../../../static/qita.png',
					offImg:"../../../static/offqita.gif",
					name:'其他休闲'
				}
			],
		   imgIndex:"",//默认图片下标  购物
           tabbarIndex:1,//tabbar导航栏默认切换 
		   value:'',//实时输入的值
			clickImgData:null,//消费类型 用户判断非空
			year:'',//当前年份
			month:'',//当前月份
			userName:'',//当前授权的名字
			listData:[],
			jiaotong:null,
			zhusu:null,
			gouwu:null,
			youlan:null,
			xiuxian:null,
			qita:null
      };
    },
	 onLoad() {
		 this.jiaotong=null
		 this.zhusu=null
		 this.gouwu=null
		 this.youlan=null
		 this.xiuxian=null
		 let userInfo=uni.getStorageSync('userInfo')
		 if(userInfo){
			 if(userInfo.user_type==="自然人"){
				 this.userName=userInfo[0].name
			 }else {
				 this.userName=userInfo[0].unit_name
			 }
		 }
		 let listData=uni.getStorageSync('listData')
		 if(listData){
			 this.listData=listData
			 if(listData.length){
				 this.tabbarIndex=listData[0].tabbarIndex
			 }
		 }
		var myDate = new Date()//获取系统当前时间
		this.year=myDate.getFullYear()
		this.month=myDate.getMonth()+1
	 },
	 methods:{
		 // 输入框聚焦事件
		 priceInputFocus:function(){
			 console.log('聚焦',this.transShow)
			 this.transShow=true
		 },
		 // 离开焦点事件
		 priceInputBlur:function(){
			  console.log('离开焦点',this.transShow)
			  this.transShow=false
		 },
		//导航栏切换
		 tabbarChange:function(e){
			 console.log('e',e)
			 this.value=""//清空输入的内容分
			 this.imgIndex=""//清空选中的图标
			 this.clickImgData=null//清空赋值的选择消费类型的数据
			 if(this.listData.length==0){
				 this.isRight1=true
				 this.isRight2=true
				 this.isTop=true
				 this.tabbarIndex=e
			 }else{
				 let index=this.listData[0].tabbarIndex
				 console.log('打印this.tabbar',this.listData[0].tabbarIndex)
				 if(index==2){
					 if(e==1){
						 uni.showModal({
						     title: '温馨提示',
						     content: '您有未提交的记账数据,请先提交,是否返回提交？',
						     success: function (res) {
						         if (res.confirm) {
						             uni.navigateBack({
						             	delta:1
						             })
						         } else if (res.cancel) {
						             console.log('用户点击取消');
						         }
						     }
						 });
					 }else{
						 return
					 }
				 }else{
					 if(index==1){
						 if(e==2){
							uni.showModal({
							    title: '温馨提示',
							    content: '您有未提交的记账数据,请先提交,是否返回提交？',
							    success: function (res) {
							        if (res.confirm) {
							            uni.navigateBack({
							            	delta:1
							            })
							        } else if (res.cancel) {
							            console.log('用户点击取消');
							        }
							    }
							});
						 }else{
							 return
						 }
					 }
				 }
			 }
		 },
		 inputChange:function(e){
			 this.value=Number( e.detail.value)
			 console.log('value',e.detail.value,this.value)
		 },
		 // 记一笔提交
		 inputSubmitButton:function(){
			 console.log('记一笔')
			 if(!this.value){this.$.toast('请先输入记账信息')
				return
			 }
			 if(this.clickImgData==null){
				 this.$.toast('请选择一种消费类型')
				 return
			 }
			 if(this.tabbarIndex==1){//记账的是参团
			    var  totalMoney=0
			    let listData=[]
			    var time = new Date()//获取当前记账时间
				 var creattime=time.toLocaleString()
			    console.log('获取数组',listData)
			    console.log('走的是记账弹团',this.clickImgData,this.tabbarIndex,this.value)
				var  obj={
					qita:this.qita,
					gouwu:this.gouwu,
					id:this.clickImgData.id,
					onImg:this.clickImgData.onImg,//选择的消费类型图片
					month:this.month,//月份
					name:this.userName,//当前记账的用户名字
					createtime:creattime,//当前记账的时间
					operating:this.value,//记账输入的数值
					useName:this.clickImgData.name,//选择的消费类型名称
					tabbarIndex:this.tabbarIndex//导航栏选择的是参团还是非参团
				}
              

				let pages = getCurrentPages();
				console.log('获取页数据',pages)
				// 当前页面修改上个页面的值
				for(let i in pages){
					console.log('是否走着',pages,i)
					let prePage = pages[i];
					if(prePage.route === "pages/example/components"){
						prePage.$vm.lists.push(obj)
						uni.setStorageSync('listData',prePage.$vm.lists)//存储记账好的数组
						prePage.$vm.getStorageListData()
					}
				}
				uni.navigateBack({
					delta:1
				})
			 }else {
				 var  totalMoney=0
				  let listData=[]
				  var time = new Date()//获取当前记账时间
				  var creattime=time.toLocaleString()
				  console.log('获取数组',listData)
				  console.log('走的是记账弹团',this.clickImgData,this.tabbarIndex,this.value)
				 var  obj={
					qita:this.qita,
					jiaotong:this.jiaotong,
					zhusu:this.zhusu,
					gouwu:this.gouwu,
					youlan:this.youlan,
					xiuxian:this.xiuxian,
				 	id:this.clickImgData.id,
				 	onImg:this.clickImgData.onImg,//选择的消费类型图片
				 	month:this.month,//月份
				 	name:this.userName,//当前记账的用户名字
				 	createtime:creattime,//当前记账的时间
				 	operating:this.value,//记账输入的数值
					useName:this.clickImgData.name,//选择的消费类型名称
					tabbarIndex:this.tabbarIndex//导航栏选择的是参团还是非参团
				 }
				 listData.push(obj)
				 console.log('获取push后的数据非参团',listData)
				 // uni.setStorageSync('listData',listData)//存储记账好的数组
				 let pages = getCurrentPages();
				 console.log('获取页数据',pages)
				 // 当前页面修改上个页面的值
				 for(let i in pages){
				 	console.log('是否走着',pages,i)
				 	let prePage = pages[i];
				 	if(prePage.route === "pages/example/components"){
						prePage.$vm.lists.push(obj)
						uni.setStorageSync('listData',prePage.$vm.lists)//存储记账好的数组
						prePage.$vm.getStorageListData()
				 	}
				 }
				 uni.navigateBack({
				 	delta:1
				 })
			 }
		 },
		 clickImg:function(e,data){//购物列表的每一项点击
		    if(e.name=='其他交通' || e.name=='其他住宿' || e.name=='其他购物' || e.name=='其他游览'  || e.name=='其他休闲'){//方便记录汇总实时时候的其他消费总计数量
				this.qita=e.name
			}else{
				this.qita=null
			}
		    if(data==='交通'){
				this.jiaotong=data
			}else if(data==='住宿'){
				this.zhusu=data
			}else if(data==='购物'){
				this.gouwu=data
			}else if(data==='游览'){
				this.youlan=data
			}else {
				this.xiuxian=data
			}
		    this.clickImgData=e
		    // this.imgIndex=e.id
			this.imgIndex=e.name
			console.log('点击的是点击的是点击的是点击的是',this.imgIndex,this.name)
		 }
	 }
  };
</script>

<style lang="scss" scoped>
	.container{
		background-color: #FFFFFF;
		padding: 30rpx 20rpx 20rpx  20rpx;
		height: 100%;
		.container-back{
			height: 100%;
			.tabbar-list{
				// width: 100%;
				color: #b0b0b0;
				font-size: 28rpx;
				width: 150rpx;
				height: 70rpx;
				line-height: 70rpx;
				font-weight: bold;
			}
			.active{
				background: linear-gradient(159deg, #80e6fc 0%, #0051ff 99%);
				// width: 100%;
				color: #FFFFFF;
				font-size: 30rpx;
				width: 150rpx;
				height: 70rpx;
				line-height: 70rpx;
				border-bottom-left-radius: 15rpx;
				border-top-right-radius: 15rpx;
			}
			.home-input{
				margin-bottom: 40rpx;
				.home-input-button{
					width: 220rpx;
					height: 76rpx;
					line-height: 70rpx !important;
					background: linear-gradient(159deg, #80e6fc 0%, #0051ff 99%);
					color: #FFFFFF;
				}
			}		
			.home-img{
				margin-bottom: 30rpx;
				.home-item{
					width: 80rpx;
					height: 80rpx;
					border-radius: 15rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
</style>
